<template>
  <q-dialog v-model="innerDialogShow">
    <q-card style="min-width: 500px;height: 720px;overflow-x: hidden">
      <q-card-section>
        <div class="text-h6">添加小组件</div>
        <div class="text-caption">选择自己喜欢的组件加入工作台吧</div>
      </q-card-section>
      <q-card-section class="relative-position" style="height: 55px">
        <div v-for="item in renderWidgets" :key="item.id"
             class="widget-list-item"
             :class="{
              'widget-list-item--active': item.mode === 1,
              'widget-list-item--inactive': item.mode === -1
             }"
             :style="{
              'top': item.top,
              'left': item.left,
             }"
        >
          <q-btn :ripple="false"
                 @click="onWidgetBtnClick(item)"
                 :flat="item.mode===1"
                 align="between"
          >
            <q-icon left size="1.5em" :name="item.icon"/>
            <div>{{ item.name }}</div>
            <q-icon right size="1.5em" :name="item.mode === 1 ? 'arrow_back' : 'add'"/>
          </q-btn>
        </div>
      </q-card-section>
      <q-card-section>
        <transition name="component-fade">
          <q-card v-if="currentWidget && currentWidget.id === 'AppWidget'">
            <q-img src="./widgets/assets/PreviewAppWidget.png" alt="" :ratio="4/3"></q-img>
            <q-card-section>
              <div class="text-h5">应用组件</div>
              <div>新增一个可以跳转到自定义页面（URL）的组件 🌼</div>
            </q-card-section>
            <AppCardEditForm inline mode="create"
                             v-model="appWidgetFormData"
                             :is-new="!this.currentWidget"
                             @submitted="onSubmitted()"
            ></AppCardEditForm>
          </q-card>
        </transition>
        <transition name="component-fade">
          <q-card v-if="currentWidget && currentWidget.id === 'TaskPanelWidget'">
            <q-img src="./widgets/assets/PreviewTaskPanel.png" alt="" :ratio="4/3"></q-img>
            <q-card-section>
              <div class="text-h6">Todo 组件</div>
              <div>管理你的待办事项，做起事情来井井有条~ 📔</div>
            </q-card-section>
            <q-card>
              <q-card-section>
                <q-btn color="green" @click="addTaskPanelWidget()" icon-right="add" class="full-width">确认添加</q-btn>
              </q-card-section>
            </q-card>
          </q-card>
        </transition>
        <transition name="component-fade">
          <!--RSS 组件-->
          <q-card v-if="currentWidget && currentWidget.id === 'RssWidget'">
            <RssWidgetEditForm v-model="rssWidgetFormData" inline mode="create"
                               @submitted="onSubmitted()"></RssWidgetEditForm>
          </q-card>
        </transition>
        <transition name="component-fade">
          <!--搜索组件-->
          <q-card v-if="currentWidget && currentWidget.id === 'SearchWidget'">
            <q-img src="./widgets/assets/PreviewSearchBarWidget.png" alt="" :ratio="4/2"></q-img>
            <q-card-section>
              <div class="text-h6">搜索组件</div>
              <div>更加便捷的使用百度、谷歌、必应搜索引擎~ 👀</div>
            </q-card-section>
            <q-card>
              <q-card-section>
                <q-btn color="green" @click="addSearchWidget()" icon-right="add" class="full-width">确认添加</q-btn>
              </q-card-section>
            </q-card>
          </q-card>
        </transition>
        <transition name="component-fade">
          <!--天气组件-->
          <q-card v-if="currentWidget && currentWidget.id === 'WeatherWidget'">
            <weather-edit-form v-model="weatherWidgetFormData" inline mode="create"
                               @submitted="onSubmitted()"></weather-edit-form>
          </q-card>
        </transition>
        <transition name="component-fade">
          <!--页面组件-->
          <q-card v-if="currentWidget && currentWidget.id === 'IframeWidget'">
            <IframeWidgetEditForm inline
                                  mode="create"
                                  @submitted="onSubmitted()"
            ></IframeWidgetEditForm>
          </q-card>
        </transition>
        <transition name="component-fade">
          <!--富文本组件-->
          <q-card v-if="currentWidget && currentWidget.id === 'RichTextWidget'">
            <RichTextWidgetEditForm inline
                                    mode="create"
                                    @submitted="onSubmitted()"
            ></RichTextWidgetEditForm>
          </q-card>
        </transition>
        <transition name="component-fade">
          <!--自定义组件-->
          <q-card v-if="currentWidget && currentWidget.id === 'CustomWidget'">
            <CustomWidgetEditForm inline
                                  mode="create"
                                  @submitted="onSubmitted()"
            ></CustomWidgetEditForm>
          </q-card>
        </transition>
      </q-card-section>
      <transition name="component-fade">
        <q-card-section v-if="!currentWidget" class="absolute-bottom-left">
          <div class="text-weight-bolder">
            <span>51提效</span>技术支持
          </div>
          <p class="text-caption">小组件会逐步丰富起来，完全开放的自定义组件也在计划之中咯 📢 </p>
        </q-card-section>
      </transition>
    </q-card>
  </q-dialog>
</template>

<script>
import AppCardEditForm from './widgets/management/AppCardEditForm.vue'
import dialog from 'src/mixins/form'
import RssWidgetEditForm from './widgets/management/RssWidgetEditForm'
import WeatherEditForm from './widgets/management/WeatherEditForm'
import { genWidgetId } from '../../utils/widget'
import IframeWidgetEditForm from './widgets/management/IframeWidgetEditForm'
import RichTextWidgetEditForm from './widgets/management/RichTextWidgetEditForm'
import CustomWidgetEditForm from './widgets/management/CustomWidgetEditForm'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'TheWidgetManagement',
  mixins: [dialog],
  components: {
    RichTextWidgetEditForm,
    WeatherEditForm,
    RssWidgetEditForm,
    AppCardEditForm,
    IframeWidgetEditForm,
    CustomWidgetEditForm
  },
  props: {
    data: Object
  },
  data () {
    return {
      weatherWidgetFormData: {},
      rssWidgetFormData: null,
      appWidgetFormData: {
        appData: {
          name: '',
          description: '',
          permalink: '',
          icon: ''
        }
      },
      widgets: [
        {
          name: '应用组件',
          id: 'AppWidget',
          mode: 0,
          top: '0',
          left: '0',
          icon: 'apps'
        },
        {
          name: 'Todo 组件',
          id: 'TaskPanelWidget',
          mode: 0,
          top: '0',
          left: '50%',
          icon: 'checklist'
        },
        {
          name: 'RSS 组件',
          id: 'RssWidget',
          mode: 0,
          top: '80px',
          left: '0',
          icon: 'rss_feed'
        },
        {
          name: '搜索组件',
          id: 'SearchWidget',
          mode: 0,
          top: '80px',
          left: '50%',
          icon: 'search'
        },
        {
          name: '天气组件',
          id: 'WeatherWidget',
          mode: 0,
          top: '160px',
          left: '0',
          icon: 'thermostat'
        },
        {
          name: '页面组件',
          id: 'IframeWidget',
          mode: 0,
          top: '160px',
          left: '50%',
          icon: 'web'
        },
        {
          name: '富文本组件',
          id: 'RichTextWidget',
          mode: 0,
          top: '240px',
          left: '0',
          icon: 'text_fields'
        },
        {
          name: '自定义组件',
          id: 'CustomWidget',
          mode: 0,
          top: '240px',
          left: '50%',
          icon: 'code'
        }
      ],
      currentWidget: null
    }
  },
  computed: {
    renderWidgets () {
      return this.widgets.filter(e => !e.hide)
    }
  },
  watch: {
    show () {
      this.currentWidget = null
      this.widgets.forEach(e => (e.mode = 0))
    }
  },
  methods: {
    nextWidget () {
      // ...
    },
    addTaskPanelWidget () {
      const widget = {
        id: genWidgetId('TASK_PANEL_WIDGET'),
        // 组件布局属性
        w: 4,
        h: 4,
        noResize: false,
        // 组件基础属性
        type: 'TaskPanelWidget',
        deletable: false
      }
      this.$store.dispatch('widget/createWidget', widget)
      this.innerDialogShow = false
    },
    addSearchWidget () {
      const widget = {
        id: genWidgetId('SEARCH_BAR'),
        // 组件布局属性
        w: 5,
        h: 1,
        maxH: 1,
        noResize: false,
        // 组件基础属性
        type: 'SearchBarWidget',
        deletable: false
      }
      this.$store.dispatch('widget/createWidget', widget)
      this.innerDialogShow = false
    },
    onSubmitted () {
      this.innerDialogShow = false
    },
    onWidgetBtnClick (widget) {
      this.currentWidget = widget
      if (widget.mode === 1) {
        this.widgets.forEach(e => {
          e.mode = 0
        })
        this.currentWidget = null
      } else {
        this.widgets.forEach(e => {
          e.mode = e === widget ? 1 : -1
        })
      }
    }
  }
})
</script>

<style lang="scss">

.widget-list-item {
  transition: all 0.5s;
  width: 50%;
  padding: 10px;
  display: inline-block;
  position: absolute;
  height: 80px;

  > button {
    width: 100%;
    height: 100%;
  }

  &--active {
    width: 100%;
    top: 0 !important;
    left: 0 !important;

    > button {
      font-size: 1.2em;
    }
  }

  &--inactive {
    opacity: 0;
    display: none;
  }
}

.component-fade-enter-active, .component-fade-leave-active {
  transition: all .5s ease-out;
}

.component-fade-enter {
  opacity: 0;
  transform: translateY(200px);
}

.component-fade-leave-to {
  opacity: 0;
  transform: translateY(200px);
}
</style>
